import React from "react";
import { Button } from 'antd'
import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import './index.scss';

const ZoomButton = ({
  onChange,
  value = 0,
}) => {
  const onChangeZoom = (data) => {
    let newZoom = value + 1
    if (data === false) {
      newZoom = value - 1
    }
    onChange(newZoom)
  };

  return (
    <>
      <Button
        disabled={value === 2}
        onClick={() => onChangeZoom(true)}
        icon={<ZoomInOutlined style={{ fontSize: 20 }} />}
      />
      <Button
        disabled={value === 0}
        onClick={() => onChangeZoom(false)}
        icon={<ZoomOutOutlined style={{ fontSize: 20 }} />}
      />
    </>

  )
}

export default ZoomButton;